<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="data.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 810px;
            height: 300px;
            margin: 0 auto;
            border: solid 1px gray;
        }

        ul li img {
            width: 80%;
            margin-top: 20px;
        }

        ul {
            width: 160px;
            height: 300px;
            text-align: center;
            float: left;
            border: solid 1px gray;
        }

        ul:hover {
            box-shadow: 2px 1px 1px gray;
        }

        li {
            width: 100%;
            height: 40px;
            line-height: 40px;
            list-style: none;
            overflow: hidden;
            white-space: nowrap;
        }

        ul li:first-child {
            height: 160px;
            border-bottom: 1px solid gray;
        }



        table {
            border-collapse: collapse;
            width: 80%;
            margin: 0 auto;
            margin-bottom: 50px;
        }
        tfoot{
            height: 50px;
        }
        tfoot tr{
            height: 50px;
        }

        th,
        td {
            border: 3px solid black;
            text-align: center;
        }

        table tr td:nth-of-type(1) {
            width: 15%;
        }

        table tr td:nth-of-type(2) {
            width: 25%;

        }

        table tr td:nth-of-type(3) {
            width: 10%;
        }

        table tr td:nth-of-type(4) {
            width: 10%;
        }

        table tr td:nth-of-type(5) {
            width: 20%;
        }

        table tr td:nth-of-type(6) {
            width: 20%;
        }

        input {
            width: 30px;
        }

        span {
            width: 50%;
            font-size: 16px;


        }

        table img {
            width: 50%;
            vertical-align: middle;
        }

        li {
            list-style: none;
        }

        .abc {
            border: solid 1px red;
        }
        .a1{
            width: 20px;

        }
    </style>
</head>

<body>
    <div id="box">
        <!-- <ul>
            <li><img src="img/c.PNG" alt=""></li>
            <li>米家电磁炉</li>
            <li>249元</li>
            <li><button type="button" id="add">加入购物车</button></li>
        </ul> -->
    </div>
    <table>
        <thead>
            <tr>
                <th>全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td><input type="checkbox"></td>
                <td><img src="./img/b.PNG" alt=""><span>全新升级高配电脑</span></td>
                <td><button type="button" class="jian">-</button><input type="number" value="1"><button type="button" class="jia">+</button></td>
                <td>¥3000</td>
                <td>1</td>
                <td>1</td>
                <td><button>删除</button></td>
                <td>3:28:30</td>
            </tr> -->
        </tbody>
        <tfoot>
            <tr>
                <td><input type="checkbox" id="quanxuan">全选按钮</td>
                <td colspan="4"><button type="button" id="delxuan">删除选中商品</button></td>
                <td>已选商品</td>
                <td class="zongjia">总价：4000</td>
            </tr>
        </tfoot>
    </table>
    <script>
        //渲染top
        var box = document.querySelector('#box');
        var dataObj = JSON.parse(localStorage.dataObj);
        var arr = [];
        showTop();
        function showTop() {
            str = '';
            for (var i = 0; i < dataObj.length; i++) {
                str += `<ul>
                            <li><img src="img/c.PNG" alt=""></li>
                            <li>${dataObj[i].name}</li>
                            <li>${dataObj[i].price}元</li>
                            <li><button type="button" onclick='add("${dataObj[i].goodsid}","${dataObj[i].name}","${dataObj[i].price}")'>加入购物车</button></li>
                        </ul>`
            }
            box.innerHTML = str;
        }
        var tbody = document.querySelector('tbody');
        var str;
        var arr = [];
        var obj;
        //本地存储
        if (localStorage.arr) {
            arr = JSON.parse(localStorage.arr);
            show();
        }
        //时间
        function myDate() {
            var date = new Date();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var seconds = date.getSeconds();
            (hour < 10) ? hour = '0' + hour : hour;
            (minute < 10) ? minute = '0' + minute : minute;
            (seconds < 10) ? seconds = '0' + seconds : seconds;
            return hour + ':' + minute + ':' + seconds;
        }
        //添加
        function add(goodsid, name, price) {
            console.log("0000");
            var time = myDate();
            var count = 1;
            var xiaoji = (Number(price) * count).toFixed(2);
            var obj = {
                id: goodsid,
                name: name,
                price: price,
                count: count,
                xiaoji: xiaoji,
                time: time
            }
            var abc = arr.some(function (cv, i) {
                return cv.id == obj.id
            })
            if (abc) {
                jia(obj.id);
                return
            }
            arr.push(obj);
            localStorage.arr = JSON.stringify(arr);
            show();
        }
        //渲染
        function show() {
            str = '';
            var sum = 0;
            var zongjia = document.querySelector('.zongjia');
            for (var i = 0; i < arr.length; i++) {
                str += `<tr>
                            <td><input type="checkbox" class='danxuan'></td>
                            <td><img src="img/c.PNG" alt=""><br/><span>${arr[i].name}</span></td>
                            <td><button type="button" onclick='jian(${arr[i].id})' class='a1'>-</button>
                                <input type="number" disabled value="${arr[i].count}" class='count'>
                                <button type="button" onclick='jia(${arr[i].id})' class='a1'>+</button></td>
                            <td>${arr[i].price}元</td>
                            <td>${arr[i].xiaoji}元</td>
                            <td><button onclick='shan(${arr[i].id})'>删除</button></td>
                            <td>${arr[i].time}</td>
                        </tr>`
                sum += arr[i].xiaoji/1;
            }
            tbody.innerHTML = str;
            zongjia.innerHTML = sum + '元';
        }
        //删除
        function shan(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    arr.splice(i, 1);
                }
            }
            localStorage.arr = JSON.stringify(arr);
            show();
        }
        //加
        function jia(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    if (arr[i].count < 20) {
                        arr[i].count++;
                        arr[i].xiaoji = (arr[i].count * Number(arr[i].price)).toFixed(2);
                    } else {
                        alert('商品到达库存上限');
                    }
                }
            }
            localStorage.arr = JSON.stringify(arr);
            show();
        }
        //减
        function jian(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    if (arr[i].count > 1) {
                        arr[i].count--;
                        arr[i].xiaoji = (arr[i].count * Number(arr[i].price)).toFixed(2);
                    }
                }
            }
            localStorage.arr = JSON.stringify(arr);
            show();
        }
        //全选
        var quanxuan = document.getElementById('quanxuan');
        quanxuan.onclick = function () {
            var danxuans = document.querySelectorAll('.danxuan');
            for (var i = 0; i < danxuans.length; i++) {
                danxuans[i].checked = this.checked
            }
        }
        //删除选中
        var delxuan = document.querySelector('#delxuan');
        delxuan.onclick = function () {
            var inns = [];
            var danxuans = document.querySelectorAll('.danxuan')
            for (var i = 0; i < danxuans.length; i++) {
                if (danxuans[i].checked) {
                    var inn = danxuans[i].parentNode.nextElementSibling.lastElementChild.innerHTML;
                    inns.push(inn);
                }
            }
            for (var i = 0; i < inns.length; i++) {
                for (var j = 0; j < arr.length; j++) {
                    if (inns[i] == arr[j].name) {
                        arr.splice(j, 1)
                    }
                }
            }
            quanxuan.checked = false;
            localStorage.arr = JSON.stringify(arr);
            show();
        }







    </script>
</body>

</html>